<template>
  <div class="my">
     <van-row>
        <van-col span="6" class="avatr">
          <img :src="avatarSrc" alt="">
        </van-col>
        <van-col span="16" @click="showmodel" style="margin-left:10px">{{nickname}}</van-col>
        <van-col span="2">
         <van-icon name="arrow" />
        </van-col>
     </van-row>
     <van-grid  square>
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
     </van-grid>
     <transition name="van-fade">
        <div class="login-model" v-show="isshow">
       <div class="login-show" @click="isshow=!isshow"></div>
        <van-form @submit="onSubmit" class="login-from">
            <van-field style="border-radius: 1.25rem;"
              v-model="username"
              name="用户名"
              label="用户名"
              placeholder="用户名"
              :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
              v-model="password"
              type="password"
              name="密码"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
            <div style="margin: 16px;">
              <van-button round block type="info" native-type="submit">提交</van-button>
            </div>
        </van-form>
     </div>
     </transition>
    
  </div>
</template>

<script>
import {GoLogin} from "@/utils/api"
export default {
    data(){
      return{
        username: '',
        password: '',
        isshow:false,
        nickname:"请登录",
        avatarSrc:""
      }
    },
    created(){
        let token = localStorage.getItem('token')
        if(token){
          let userInfo = JSON.parse(localStorage.getItem('userInfo'))
          this.nickname = userInfo.nickname
          this.avatarSrc =userInfo.avatar
        }
    },
    methods: {
      onSubmit(values) {
          console.log('submit', values);
          let username = values["用户名"]
          let pwd = values["密码"]
            GoLogin({username,pwd}).then(res=>{
               console.log(res.data)
              if(res.data.errno==0){
                console.log(111)
                   this.$toast.success("登录成功")
                    localStorage.setItem("token",res.data.data.token)
                    localStorage.setItem("userInfo",JSON.stringify(res.data.data.userInfo))
                   setTimeout(() => {
                    this.isshow = !this.isshow
                 }, 2000);
                 this.nickname = res.data.data.userInfo.nickname
                 this.avatarSrc = res.data.data.userInfo.avatar
              }
            })
     },
     showmodel(){
       let token = localStorage.getItem('token')
       if(token){
         return
       }
       this.isshow = !this.isshow
     }
  }
}
</script>

<style lang="scss" scoped>

  .my{
    width: 100%;
    height: 100%;
    .van-row{
      width: 100%;
      height: 6.25rem;
      display: flex;
      justify-content: space-around;
      align-items: center;
      background: aqua;
    }
  }
  .login-model{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .login-from{
    width: 90%;
    border-radius: 1.25rem;
    margin-bottom: .3rem;
    background: #fff;
    position: absolute;
    top: 30%;
    left: 5%;
  }
  .login-show{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgb(0,0,0,.6);
   
  }
  .avatr{
    width:3.125rem;
    height: 3.125rem;
    overflow: hidden;
    border-radius: 50%;
    margin-left: 1rem;
    img{
      width: 100%;
      height: 100%;
    }
  }
</style>